<template>
	<view class="content">
		<yHeader :title="tList[type]" :topBg="topBg" color="white" :showLeft="false"></yHeader>
		<view class="top">
			<image class="bg" src="/static/img/bg.png" mode="widthFix"></image>
			<view class="info" v-if="type != 'msg'">
				<view class="lnbox">
					<image src="/static/img/lne.png" mode="widthFix"></image>
					<view class="name">
						<text class="hi">HI ~</text>
						<text>唯一道 </text>
					</view>
				</view>
				<text class="play">打卡</text>
			</view>
		</view>
		<view class="main">
			<aHome v-if="type == 'home'"></aHome>
			<yMsg v-if="type == 'msg'" style="margin-top: -100px;position: relative;z-index: 99;"></yMsg>
			<!-- <tUser></tUser> -->
		</view>
		<yFooter ref="footer"></yFooter>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'home',
				topBg: '',
				tList: {
					home: '首页',
					msg: '消息',
					mine: '个人中心'
				},
				style: ''
			}
		},
		onLoad() {},
		mounted() {
			uni.$on('changeType', (e) => {
				this.type = e
			})
		},
		onPageScroll(e) {
			if (e.scrollTop > 5) {
				this.topBg = '#fc7941';
			} else {
				this.topBg = '';
			}
		},
		onUnload() {
			uni.$off()
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 54px;
		background: #F9FAFD;
	}

	.top {
		.bg {
			width: 100%;
			margin-top: -44px;
		}
	}

	.info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		margin-top: -60px;
		position: relative;
		z-index: 1000;

		.lnbox {
			width: 60%;
			position: relative;

			image {
				width: 100%;
			}

			.name {
				position: absolute;
				display: flex;
				align-items: center;
				width: 65%;
				padding-left: 22px;
				box-sizing: border-box;
				justify-content: space-between;
				top: 50%;
				transform: translate(0, -50%);
				margin-top: -3px;
				color: #fff;
				font-weight: bold;

				.hi {
					font-weight: normal;
					color: #FE8E5E;
				}
			}
		}

		.play {
			color: #FE8E5E;
			padding: 2px 8px;
			border-radius: 4px;
			font-size: 14px;
			background: rgba(255, 255, 255, 0.78);
		}
	}
</style>